@import "header.html"
<link rel="stylesheet" href="../css/cancel_order.css">
<link rel="stylesheet" href="../css/mobileSelect.css">
<link rel="stylesheet" href="../css/hm_basic.css">

<body>
<main id="main" v-cloak>
    <header class="fxj-header" v-show="basic">
        <a onclick="back()">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>基本信息</h1>
    </header>

    <header class="fxj-header" @click="toadd_addressmain" v-show="add_address_page&&location">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>房源地址</h1>
    </header>

    <header class="fxj-header" @click="toBasic" v-show="!add_address_page&&location">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>房源地址</h1>
    </header>


    <header class="fxj-header" @click="bedPage(3)" v-show="bedSet.page1">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>床位设置</h1>
    </header>

    <header class="fxj-header" @click="bedPage(1)" v-show="bedSet.page2">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>增加床位</h1>
    </header>

    <header class="fxj-header" @click="toBasic" v-show="infrastructure">
        <a href="#">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou"></use>
            </svg>
        </a>
        <h1 class="fxj-title" v-cloak>基础设施</h1>
    </header>

    <main class="pub_main" id="step1" v-show="location" v-cloak>
        <div class="main_map" id="map" v-show="add_address_page">

        </div>
        <span style="width: 10px;height: 10px;background: red;border-radius: 5px;z-index: 100;position: fixed;left: 48%;top: 7.05rem"
              v-show="add_address_page"></span>
        <span style="width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 15px solid red;position: fixed;left: 48%;top: 7.20rem"
              v-show="add_address_page"></span>
        <div class="pub_location" v-show="add_address_page">
            <div class="location_content">
                <div class="mui-content">
                    <ul class="mui-row" id="fuck-mui">
                        <li class="mui-table-view-cell line-transverse">
                            <input type="text" class="location_input halfinput" readonly placeholder="请选择省 / 市 / 区"
                                   v-model="basic_info.province_block"
                                   id="house_area">
                        </li>
                        <li class="mui-table-view-cell line-transverse">
                            <input type="text" class="location_input" readonly placeholder="拖动地图后点击选择按钮"
                                   v-model="add_address.street" style="width: 70%">
                            <button class="line-vertical" id="fuck-select" @click="mapchose">
                                <span>选</span>
                                <span>择</span>
                            </button>
                        </li>
                        <li class="mui-table-view-cell line-transverse">
                            <input type="text" class="location_input" placeholder="填写详细地址，精确到小区"
                                   v-model="add_address.detailAddress">
                        </li>
                        <li class="mui-table-view-cell line-transverse">
                            <input type="text" class="location_input" placeholder="栋单元门牌号(对游客保密)"
                                   v-model="add_address.houseNumber">
                        </li>
                    </ul>
                </div>
            </div>
            <span class="span_label"
                  style="margin:5px 10px 40px 10px;font-weight: normal">您的门牌号信息将只对预定了的房客展示，如1栋2单元2306</span>
        </div>

        <div class="mui-content" v-show="!add_address_page">

            <ul class="mui-row marrow center" id="sssssss">
                <li class="mui-table-view-cell basicCell centerCell line-transverse"
                    @click="setAddressId(add.id,add.mes)" v-for="add in address_list"
                    :class="{ 'highlight' : add.active}">
                    <span class="bedspan_m left_20 no-touch">{{add.mes}}</span>
                    <span class="no-touch" v-show="stepone_send.houseAddress===add.id">
                            <svg class="icon">
                                <use xlink:href="#icon-finish"></use>
                            </svg>
                        </span>
                    <!--<span style="font-size: 14px" v-show="stepone_send.houseAddress!==add.id" @click.capture.stop="delAddress(add.id)">
                        删除
                    </span>-->
                </li>
            </ul>

            <ul class="mui-row marrow center">
                <li class="mui-table-view-cell basicCell cirli" @click="toadd_address()">
                    <svg class="icon" style="color: darkorange">
                        <use xlink:href="#icon-jia1"></use>
                    </svg>
                </li>
            </ul>
        </div>
    </main>


    <main v-show="basic" class="pub_main" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">

                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">房源标题
                            <strong v-show="!stepone_send.houseTitle">*</strong>
                        </span>
                    <span class="" style="width: 60%">
                            <input type="text" style="width: 100%;height: auto" v-model="stepone_send.houseTitle"
                                   placeholder="请输入">
                        </span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">出租类型
                            <strong v-show="stepone_send.rentType===-1">*</strong>
                        </span>
                    <span class="" id="rent_type">{{stepone_send.rentTypeText}}</span>

                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">房源类型
                            <strong v-show="stepone_send.roomType===''">*</strong>
                        </span>
                    <span class="" id="house_type">{{stepone_send.roomTypeText}}</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell" @click="toLocation">
                        <span class="">房源地址
                            <strong v-show="addressTxt==='请选择'">*</strong>
                        </span>
                    <span class="">{{addressTxt}}</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">房屋面积
                            <strong v-show="!stepone_send.houseArea">*</strong>
                        </span>
                    <span class="">
                            <input type="number" v-model="stepone_send.houseArea" placeholder="请输入"
                                   onkeypress="return event.keyCode>=48&&event.keyCode<=57;"
                                   onkeyup="checkAreaLegal();">㎡
                        </span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">房屋户型
                            <strong v-show="!stepone_send.roomIndoors">*</strong>
                        </span>
                    <span class="" id="housetype">请选择</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                        <span class="">可住人数
                            <strong v-show="!stepone_send.houseClassify">*</strong>
                        </span>
                    <input type="number" class="" style="padding: 0;text-align: right;width: 6rem;"
                           onkeypress="return event.keyCode>=48&&event.keyCode<=57;"
                           placeholder="请输入" required v-model="stepone_send.houseClassify">
                </li>
                <li class="mui-table-view-cell line-transverse basicCell" @click="bedPage(1)">
                        <span class="">房间床数
                            <strong v-show="bedamount===0">*</strong>
                        </span>
                    <span class="" style="right: 2rem;font-size: 16px"
                          id="bed_info">{{bedamount===0?'请选择':bedamount}}</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell" @click="toInfrastructure">
                        <span class="">基础设施
                            <strong v-show="!selectedFacility">*</strong>
                        </span>
                    <span class="">{{selectedFacility?'已选'+selectedFacility+'项设施':'请选择'}}</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">卫生间</span>
                    <select class="" style="font-size: 16px;width: auto;padding: 0" v-model="stepone_send.toiletType">
                        <option value="1">独立卫生间</option>
                        <option value="0">公用卫生间</option>
                    </select>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span>更换被单</span>
                    <select style="font-size: 16px;width: auto;padding: 0" v-model="stepone_send.bedLinen">
                        <option value="0">每客一换</option>
                        <option value="1">每日一换</option>
                    </select>
                </li>
            </ul>

            <ul class="mui-row marrow">
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">{{(+stepone_send.addBed===0?'不能':'能')+'加床'}}</span>
                    <div class="mui-switch mui-switch-orange mui-switch-mini"
                         :class="{'mui-active':+stepone_send.addBed===1}" id="addbed" @click="isaddbed">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">{{(+stepone_send.addGuest===0?'不能':'能')+'加客'}}</span>
                    <div class="mui-switch mui-switch-orange mui-switch-mini"
                         :class="{'mui-active':+stepone_send.addGuest===1}" id="addClints"
                         @click="addClints">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
            </ul>
        </div>
    </main>

    <main v-show="bedSet.page1||bedSet.page2" class="pub_main" v-cloak>
        <div class="mui-content">
            <div v-if="stepone_send.bedList.length === 0" class="nonebed tips" id="none_bed"
                 style="text-align: center; margin: 1rem 0">您还未添加床铺信息
            </div>
            <ul class="mui-row marrow center" v-show="bedSet.page1" id="bedlist_li">
                <li class="mui-table-view-cell line-transverse basicCell" v-for="(bed,i) of stepone_send.bedList"
                    @click="bedPage(4,bed,i)">
                    <span class="bedspan_l" :data-type="bed.bedtype">{{bed.bedName}}</span>
                    <span class="bedspan_m">{{bed.width + '米宽 x ' + bed.length + '米长'}}</span>
                    <span class="bedspan_r"> {{bed.count + '张'}}</span>
                </li>
                <li class="mui-table-view-cell basicCell cirli" @click="bedPage(2)">
                        <span>
                            <svg class="icon" style="color: darkorange">
                                <use xlink:href="#icon-jia1"></use>
                            </svg>
                        </span>
                </li>
            </ul>

            <ul class="mui-row marrow" v-show="bedSet.page2">
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">床型</span>
                    <span class="" id="bed_kind">{{basic_info.bedtype}}</span>
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">数量</span>
                    <input style="padding: 0;text-align: right" type="number" class=""
                           onkeypress="return event.keyCode>=48&&event.keyCode<=57;"
                           v-model="basic_info.bedinfo.count" placeholder="请输入">
                </li>
                <li class="mui-table-view-cell line-transverse basicCell">
                    <span class="">长度</span>
                    <span class="">
                            <input type="number" placeholder="请输入" v-model="basic_info.bedinfo.length"
                                   onkeypress="return event.keyCode>=46&&event.keyCode<=57;">米</span>
                </li>
                <li class="mui-table-view-cell basicCell">
                    <span class="">宽度</span>
                    <span class="">
                            <input type="number" v-model="basic_info.bedinfo.width" placeholder="请输入"
                                   onkeypress="return event.keyCode>=46&&event.keyCode<=57;">米</span>
                </li>
            </ul>
            <div class="del-bed-container" v-show="bedSet.changeBed">
                <button class="del-bed-btn" @click="delBed">删除床位</button>
            </div>
        </div>
    </main>

    <main v-show="infrastructure" class="pub_main" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">卫浴</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="5">热水淋浴</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="6">牙具</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="7">香皂</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="8">拖鞋</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="9">手纸</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="10">毛巾</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="11">沐浴露洗发露</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="12">浴缸</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">电器</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="13">电视</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="14">空调</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="15">饮水设备</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="16">冰箱</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="17">洗衣机</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="19">有线网络</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="18">无线网络</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="20">暖气</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">设施</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="21">电梯</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="22">停车位</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="23">门禁</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="28">热水</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>

                    </div>
                </li>


                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">许可</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="25">允许做饭</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="24">允许吸烟</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="26">允许携带宠物</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="27">允许聚会</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">服务</span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="34">机场火车站接送</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left she-shi" data-value="35">导游</span>
                    <div class="mui-switch mui-switch-orange  mui-switch-mini ">
                        <div class="mui-switch-handle"></div>
                    </div>
                </li>

                <li class="mui-table-view-cell groupCell">
                    <span class="span_left">其他</span>
                </li>
                <li class="mui-table-view-cell infraCell" style="height: auto">
                    <textarea placeholder="请填写" v-model="stepone_send.other" rows="5"
                              style="padding: 2px;height: auto;width: 100%;text-align: left;background: #ededf5;font-size: 14px"></textarea>
                </li>
            </ul>
        </div>
    </main>


    <footer class="pub_foot" @click="send_stepone_send()" v-show="this.basic">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="toBasic" v-show="location&&!add_address_page">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="send_address" v-show="location&&add_address_page">
        <h1 class="fxj-title">完成</h1>
    </footer>


    <footer class="pub_foot" @click="bedPage(3)" v-show="bedSet.page1">
        <h1 class="fxj-title">完成</h1>
    </footer>

    <footer class="pub_foot" @click="changeBedFun" v-show="bedSet.changeBed">
        <h1 class="fxj-title">修改床位</h1>
    </footer>

    <footer class="pub_foot" @click="addBedFun" v-show="bedSet.page2&&!bedSet.changeBed">
        <h1 class="fxj-title">添加床位</h1>
    </footer>

    <footer class="pub_foot" @click="getInfrastructure" v-show="infrastructure">
        <h1 class="fxj-title">完成</h1>
    </footer>

</main>
@import "js.html"
<script src="http://api.map.baidu.com/api?v=2.0&ak=4mfFj7Ph9nym7oa4e9EkW24KDQF4wavl&callback=init"></script>
<script src="../lib/js/picker.min.js"></script>
<script src="../script/citys.js"></script>
<script src="../script/hm_basic.js"></script>
</body>

@import "footer.html"